<%- include header%>

<div class="personal">
	<div style="height: 300px;width: 1350px;">
		<img src="/images/perpage.jpg" />
	</div>
	<div class="container">
		<div class="col-lg-3" style="height: auto;">
			<div class="personal_info">
				<!--头像部分-->
				<div class="headimg">
					<!--<img src="/upload_imgs/background.jpg"/>-->
					<img src="/<%=head %>"/>
					
					
				</div>
				<!--信息部分-->
				<div class="user_info">
					<p><h3 style=""><%=title %></h3></p>
					
					<p>
					<% if(user.name!=title){%>
						<button class="btn btn-success" id="concern" style="margin-left: 30px;height: 20px;padding: 0; width: 80px;">
					+关注</button>
						<%}%>
						
					<%for(var i=0;i<concerns.length;i++){%>
						<%= concerns.concern%>
						<%if(concerns[i].concern==title){%>
							<script>
								jq("#concern").remove();
							</script>
						<button class="btn btn-success" style="margin-left: 10px;height: 25px;padding: 0; width: 80px;">
					已关注</button>
						<%}%>
						<%}%>
					</p>
					<p>
						<h4>
					关注：<a href="#" class="text-success">90</a>
				</h4></p>
					<p>
						<h4>
					粉丝：<a href="#"class="text-success">10086</a>
				</h4></p>
					<p>
						<h4>
					攻略：<a href="#"class="text-success">86</a>
				</h4></p>
					<p>
						<h4>
					游记：<a href="#"class="text-success">88</a>
				</h4></p>
				
				</div>

			</div>
		</div>

		<!--个人内容-->
		<div class="col-lg-7" style="height:auto;background: white; padding-bottom: 30px;min-height: 300px;">
			<div>

				<!-- Nav tabs -->
				<ul class="nav nav-tabs" role="tablist">
					
					<li role="presentation" class="active">
						<a href="#tra_notes" aria-controls="profile" role="tab" data-toggle="tab">TA游记</a>
					</li>
					<!--<li role="presentation">
						<a href="#tra_help" aria-controls="home" role="tab" data-toggle="tab" class="text-success">攻略</a>
					</li>
					<li role="presentation">
						<a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">评论</a>
					</li>-->

				</ul>

				<!-- Tab panes -->
				<div class="tab-content">
					
					
					<div role="tabpanel" class="tab-pane active" id="tra_notes">
						<div style="height:auto;">
							<% posts.forEach(function(post,index){%>
							<div style="height: 200px; overflow: hidden;
								margin-top: 10px;
								 ">
							<p>
								<h3 >
									<a href="/u/<%= post.name%>/<%= post.time.day%>/<%= post.title%>" 
										class="text-success">
									<%= post.title%>
									</a></h3></p>
							<p class="info">
								作者：
								<a href="/u/<%= post.name %>" class="text-success">
									<%= post.name %>
								</a>
								日期：
								<a href="#" class="text-success">
									<%= post.time.minute%>
								</a>
								地点：
								<a href="#" class="text-success">
									<%= post.area%>
								</a>
							</p>
							<p style="height: 100px; text-overflow:ellipsis; overflow: hidden;">
								<%- post.post%>
							</p>
							
							</div>
							<%})%>
						</div>
						
					</div>
					<div role="tabpanel" class="tab-pane" id="tra_help">暂时没有攻略</div>
					<div role="tabpanel" class="tab-pane" id="messages">...</div>

				</div>

			</div>
		</div>
	</div>
</div>

<%- include footer%>
<link rel="stylesheet" href="/stylesheets/personal_page.css" />
<script type="text/javascript">
jq = jQuery.noConflict();
jq(function() {
	jq('.nav-tabs li a').click(function(e) {
		e.preventDefault()
		jq(this).tab('show');
		jq(this).css('border-bottom','5px solid #16A085').parents("li").siblings().children("a").css('border-bottom','none');
	});
	jq(".headimg").on('mousemove', function() {
		jq(".opci").show();
	});
	jq(".headimg").on('mouseleave', function() {
		jq(".opci").hide();
	});
	jq("#user_info button:first-child").on('click',function(){
		jq("#user_info p input").removeAttr("disabled");
		jq("#user_info p input").css('border','1px solid #ccc');
		jq("#user_info button:last-child").show();
		
	});
	jq("#user_info button:last-child").hide();
	jq("#user_info button:last-child").on('click',function(){
		
		jq("#user_info button:last-child").hide();
	});
});</script>